<template>
    <el-main v-loading="showLoading">
		<div class="actionform">
			<el-table :data="dataList" border :header-cell-style="{background:'#f8f8f8',color:'#606266'}" height="100%">
				<el-table-column prop="tradeNo" align="center" width="180" label="订单编号"></el-table-column>
				<el-table-column align="center" width="150" label="发送人">
					 <template slot-scope="scope">{{$util.decode(scope.row.memberNickName)}}</template>
				</el-table-column>
				<el-table-column align="center" width="240" label="发送商品">
					 <template slot-scope="scope">
						<el-tooltip :content="item.productName" v-for="item of scope.row.itemModels" :key="item.itemUid">
							<p class="text_align_left">{{item.productName | controlLength}} x{{item.buyCount}}</p>
						</el-tooltip>
					</template>
				</el-table-column>
				<el-table-column width="100" align="center" label="订单金额">
					<template slot-scope="scope">
						<span class="text-price">{{$util.prices(scope.row.realAmount)}}</span>
					</template>
				</el-table-column>
				<el-table-column prop="address" min-width="240" align="center" label="接收地址">
					<template slot-scope="scope">
						<p class="text_align_left" v-if="scope.row.address">地址: {{scope.row.address}}</p>
						<p class="text_align_left" style="padding-left: 20px">
							<span v-if="scope.row.mobile">电话: {{scope.row.mobile}}</span>
							<span v-if="scope.row.receiveNickName">联系人: {{$util.decode(scope.row.receiveNickName)}}</span>
						</p>
					</template>
				</el-table-column>
				<el-table-column align="center" width="200" label="配送方式">
					<template slot-scope="scope">
						<el-form :model="scope.row" ref="channelId">
							<el-form-item prop="channelId" :rules="[{ required: true, message: '请选择快递承运公司', trigger: 'blur' }]">
								<el-select v-model="scope.row.channelId" placeholder="请选择承运公司" size="small">
									<el-option
										v-for="item in logisticsList"
										:key="item.channelCode"
										:label="item.channelName"
										:value="item.channelCode"></el-option>
								</el-select>
							</el-form-item>
						</el-form>
					</template>
				</el-table-column>
				<el-table-column prop="postNo" align="center" width="200" label="物流单号">
					<template slot-scope="scope">
						<el-form :model="scope.row" ref="postNo">
							<el-form-item prop="postNo" :rules="[{ required: true, message: '请填写物流单号', trigger: 'blur' }]">
								<el-input placeholder="请填写物流单号" size="small" v-model="scope.row.postNo"></el-input>
							</el-form-item>
						</el-form>
					</template>
				</el-table-column>
			</el-table>
		</div>
		
		<el-row class="footer">
			<el-col :span="12" :push="12">
				<el-pagination
					@current-change="handlePaginationChange"
					:current-page="page"
					:page-size="10"
					background
					:disabled="!dataList.length"
					:total="count"
					hide-on-single-page
					class="text_align_right"
					layout="total, prev, pager, next, jumper">
				</el-pagination>
			</el-col>
		</el-row>
		<el-footer class="flex-center footer">
			<el-button type="primary" @click="handlePost" :disabled="!dataList.length">确  认</el-button>
			<el-button @click="closeDialog(false)">取  消</el-button>
		</el-footer>
    </el-main>
</template>

<script>
	import { ordersDeliver, ordersList } from "@/api/table";
	import utils from '@/utils/utils';

    export default {
        name: "ORDERS_ACTION",
        filters: {
            controlLength: curStr => utils.controlLength(curStr, 15),
        },
        props: {
            infoData: {
            	type: Array,
                default() {
					return []
				}
			},
			logisticsList: {
            	type: Array,
                default() {
					return []
				}
			},
		},
        data() {
            return {
				dataList: [],
				showLoading: false,
				page: 1,
				count: 0
            }
		},
      	methods: {
			// 分页
			handlePaginationChange(val) {
				this.page = val;
                this.getData();
			},
			// 更新数据
			updateData() {
				if (this.infoData.length === 1) {
					this.dataList = [...this.infoData];
				} else {
					this.getData()
				}
			},
			// 初始化数据
			getData() {
				this.showLoading = true;
				ordersList({
                    status: 1,
                    page: this.page - 1
                }).then(result => {
                    if (result.data.isSuccessful === "Y") {
                        const { count, orderList } = result.data.data;
                        this.count = count;
                        let redPacketInfo = [];
						orderList.map(i => {
                            let redPacketInfo = [];
                            i.redPacketModels.map(item => {
                                redPacketInfo.push({
                                    buyCount: 1,
                                    productName: item.redPacketName || '红包',
                                    productListPath: item.redPacketCoverUrl,
                                    unitPrice: item.redPacketAmount,
                                    totalPrice: item.redPacketAmount
                                })
                                return item
                            });
                            i.itemModels = [...i.itemModels, ...redPacketInfo]
                        });
                        this.dataList = orderList;
                    }
				})
				.catch(err => {})
                .finally(() => {
                    if (this.showLoading) {
                      this.showLoading = false
                    }
                });
			},
			
			// 批量发货
			handlePost() {
				let canPostNo = this.dataList.every(item => item.postNo);
				if (!canPostNo) {
					this.$message.error('包含没有填写运单号的订单！')
					return
				}

				let canChannelId = this.dataList.every(item => item.channelId);
				if (!canChannelId) {
					this.$message.error('包含没有选择快递承运公司的订单！')
					return
				}

				let canDoIt = this.dataList.every(item => item.address);
				if (!canDoIt) {
					this.$message.error('包含没有收货地址的订单！')
					return
				}

				this.showLoading = true;
				let postData = [];
				this.dataList.map(item => {
					const { channelId, orderUid, postNo } = item;
					return postData.push({
						channelId,
						orderUid,
						postNo
					});
				});

				ordersDeliver({
					deliverInfos: JSON.stringify(postData)
				}).then(res => {
					if (res.data.isSuccessful !== "Y") {
						this.$message.error(res.data.message);
						return
					}
					this.$message({
						message: "操作成功！",
						type: "success"
					});
					setTimeout(() => {
						this.closeDialog(true);
					}, 0);
				}).finally(() => {
					this.showLoading = false;
				});
			},
			closeDialog(refresh = false, type = '') {
				if (refresh) {
					this.$event.emit('ShipFinshed');
				}
				this.dataList = [];
				this.$emit('func', {
					action: false,
					refresh,
					type
				})
			},
      	},
  	}
</script>
<style lang="scss" scoped>
	.actionform {
		height: 680px;
	}
	.el-form-item {
		margin-bottom: 0;
	}

</style>

